<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<title>本月菜单管理</title>
	<link href="/static/lunch/css/bootstrap.min.css" rel="stylesheet">
	<link href="/static/lunch/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
	<style>
.badge-hot {
	background-color: red;
}

span.cur {
	color: red;
}
	</style>
</head>
<body>
<div class="container">
<div class="row" style="margin-top: 100px;">
	<div class="col-xs-3">
		<div class="panel panel-primary">
			<div class="panel-heading">
				<h3 class="panel-title">本月上旬菜单</h3>
			</div>
			<ul class="list-group">
				{% for food in first %}
				<li class="list-group-item" data-itemid="{{food.id}}">{{ food.name }}</li>
				{% empty %}
				<li class="list-group-item disabled">暂无</li>
				{% endfor %}
			</ul>
		</div>
	</div>
	<div class="col-xs-3">
		<div class="panel panel-primary">
			<div class="panel-heading">
				<h3 class="panel-title">本月中菜单</h3>
			</div>
			<ul class="list-group">
				{% for food in second %}
				<li class="list-group-item" data-itemid="{{food.id}}">{{ food.name }}</li>
				{% empty %}
				<li class="list-group-item disabled">暂无</li>
				{% endfor %}
			</ul>
		</div>
	</div>
	<div class="col-xs-3">
		<div class="panel panel-primary">
			<div class="panel-heading">
				<h3 class="panel-title">本月下旬菜单</h3>
			</div>
			<ul class="list-group">
				{% for food in third %}
				<li class="list-group-item" data-itemid="{{food.id}}">{{ food.name }}</li>
				{% empty %}
				<li class="list-group-item disabled">暂无</li>
				{% endfor %}
			</ul>
		</div>
	</div>
	<div class="col-xs-3">
		<div class="panel panel-primary">
			<div class="panel-heading">
				<h3 class="panel-title">其他菜式</h3>
			</div>
			<ul class="list-group">
				{% for food in whole %}
				<li class="list-group-item" data-itemid="{{food.id}}">{{ food.name }}</li>
				{% empty %}
				<li class="list-group-item disabled">暂无</li>
				{% endfor %}
			</ul>
		</div>
	</div>
</div>

<div class="row">
	<div class="panel panel-primary">
		<div class="panel-heading">
			<h3 class="panel-title">所有菜式</h3>
		</div>
		<table class="table table-hover table-bordered">
			<tbody>
				{% for foods_column in foods %}
				<tr>
					{% for food in foods_column %}
						<td data-itemid="{{food.id}}">{{food.name}}
							<span class="glyphicon glyphicon-arrow-up cfg_first {{food.is_first}}" style="cursor: pointer;" title="上旬"></span>
							<span class="glyphicon glyphicon-resize-small cfg_second {{food.is_second}}" style="cursor: pointer;" title="中旬"></span>
							<span class="glyphicon glyphicon-arrow-down cfg_third {{food.is_third}}" style="cursor: pointer;" title="下旬"></span>
							<span class="glyphicon glyphicon-calendar cfg_whole {{food.is_whole}}" style="cursor: pointer;" title="全月"></span></td>
					{% endfor %}
				</tr>
				{% endfor %}
			</tbody>
		</table>
		<div class="panel-footer">
			<input type="text" id="foodname" placeholder="菜品">
			<input type="number" id="foodprice" placeholder="价格">
			<button id="quickadd">快速添加</button>
		</div>
	</div>
</div>
</div>

<script src="/static/lunch/js/jquery-1.9.1.min.js"></script>
<script src="/static/lunch/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
  <script src="/static/lunch/js/html5shiv.js"></script>
  <script src="/static/lunch/js/respond.min.js"></script>
<![endif]-->
<script>
Date.prototype.Format = function(fmt)   
{ //author: meizz   
  var o = {   
    "M+" : this.getUTCMonth()+1,
    "d+" : this.getUTCDate(),                    //日   
    "h+" : this.getUTCHours(),                   //小时   
    "m+" : this.getUTCMinutes(),                 //分   
    "s+" : this.getUTCSeconds(),                 //秒   
    "q+" : Math.floor((this.getUTCMonth()+3)/3), //季度   
    "S"  : this.getUTCMilliseconds()             //毫秒   
  };   
  if(/(y+)/.test(fmt))   
    fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));   
  for(var k in o)   
    if(new RegExp("("+ k +")").test(fmt))   
  fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));   
  return fmt;   
}


function cfg_event(target, el){
	var itemid = $(el).parent("td").attr("data-itemid");
	$.ajax({
		type:"POST",
		url:"cfg/" + itemid + "/",
		data: {
			'target': target,
		},
		success: function(obj) {
			$(el).css("color", "red");
		},
		error: function(err, ehr, obj) {
			//
		}
	});
};

$("body").on('click', '.cfg_first', function() {
	cfg_event('first', this);
});
$("body").on('click', '.cfg_second', function() {
	cfg_event('second', this);
});
$("body").on('click', '.cfg_third', function() {
	cfg_event('third', this);
});
$("body").on('click', '.cfg_whole', function() {
	cfg_event('whole', this);
});

$("#quickadd").click(function() {
	var name = $("#foodname").val();
	var price = $("#foodprice").val();
	if(name === "" || name === undefined || price === "" || price === undefined) {
		alert("添加失败：请输入正确的菜品名称和价格");
		return "";
	}
	
	$.ajax({
		type:"POST",
		url:"add/",
		data: {
			'foodname': name,
			'foodprice': price
		},
		success: function(obj) {
			$.ajax({
				type:"GET",
				success: function(_doc) {
					var doc = $(_doc);
					$("table.table").html($("table.table", doc).html());
				}
			});
		},
		error: function(ehr, err, obj) {
			alert(ehr.responseText);
		}
	});
});
</script>
</body>
</html>